<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="margin: 10px">
<div style="margin-top: 10px;margin-right: 20px">
    <form class="layui-form" action="javascript:;" id="selectSpecificationDetailForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">申请单状态</label>
                <div class="layui-input-inline">
                    <select name="status" lay-verify="required" lay-filter="status" id="status">
                        <option value="0">在途</option>
                        <option value="2">完成</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo2">立即搜索</button>
                </div>
            </div>
        </div>
    </form>
</div>
    <hr style="margin-bottom: 20px">
    <div style="margin-left: 10px;margin-right: 10px">
        <table class="layui-hide" id="demo" lay-filter="test"></table>
    </div>
    <input id="addReimburseHidden" value="" hidden="hidden">
    <input type="text" hidden="hidden" id="parentId">
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addReimburse">填写报销单</button>
    </div>
</script>
<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table', 'form', 'jquery', 'element','layer', 'laydate'], function () {
        var table = layui.table
            ,layer = layui.layer
            , form = layui.form
            , $ = layui.jquery
            , laydate = layui.laydate
            , element = layui.element;

        var tableRender = function () {
            //执行一个 table 实例

            table.render({
                elem: '#demo'
                , id:"reimburseList"
                , url: 'getReimburse' //数据接口
                , title: '报销单明细表'
                , page: true //开启分页
                , toolbar: '#toolbarDemo'
                , limit: 10
                , limits: [10, 20, 30]
                , cols: [[ //表头
                    {type: 'numbers',title: '序号',width: 80}
                    , {field: 'content', align: 'center', title: '内容', width: 200}
                    , {field: 'amount', align: 'center', title: '金额', width: 130}
                    , {
                        field: 'status', title: '状态', align: 'center', width: 90, templet: function (res) {
                            if (res.status == 1) {
                                return '<p style="color: red">驳回</p>';
                            } else if(res.status == 0){
                                return '审批中';
                            }else{
                                return '已通过';
                            }
                        }
                    }
                    , {
                        field: 'do', title: '操作', align: 'center', width: 170, templet: function (res) {
                            if (res.status == 1) {
                                return '<button  class="layui-btn layui-btn-xs layui-btn-normal notice">查看原因</button><button class="layui-btn layui-btn-xs edit">编辑</button><input type="text" hidden="hidden" value="'+res.id+'"><input type="text" hidden="hidden" value="'+res.remark+'">';
                            } else if(res.status == 0){
                                return '<input type="text" hidden="hidden" value="'+res.id+'"><button class="layui-btn layui-btn-xs layui-btn-danger del">撤销</button>';
                            }else{
                                return '';
                            }
                        }
                    }
                ]]
            });
        }

        //初始化表格
        tableRender();


        var openUpdateReimburse = function(json){
            layer.open({
                title: ['报销单', 'font-size:18px;']
                , shade: 0.6 //遮罩透明度
                , area: '400px'//宽度
                , type: 2
                , anim: 1 //0-6的动画形式，-1不开启
                , content: 'jump?url=review/editReimburse'
                , success: function (layero, index) {
                    //layer高度自适应
                    layer.iframeAuto(index);
                }
                , end: function () {
                        tableRender();
                        layer.msg('提交成功', {
                            icon: 1,
                            time: 500 //2秒关闭（如果不配置，默认是3秒）
                        });

                }
            })
        }

        var openAddReimburse = function () {
            layer.open({
                title: ['报销单', 'font-size:18px;']
                , shade: 0.6 //遮罩透明度
                , area: '400px'//宽度
                , type: 2
                , anim: 1 //0-6的动画形式，-1不开启
                , content: 'jump?url=review/addReimburse'
                , success: function (layero, index) {
                    //layer高度自适应
                    layer.iframeAuto(index);
                }
                , end: function () {
                    var addReimburseHidden = $("#addReimburseHidden").val();
                    debugger;
                    if (addReimburseHidden == "success") {

                        $("#addReimburseHidden").val("");
                        tableRender();
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 500 //2秒关闭（如果不配置，默认是3秒）
                        });
                    } else if (addReimburseHidden == 2) {
                        layer.msg('添加失败',
                            {icon: 2, time: 500}
                        )
                    } else if(addReimburseHidden=="repeatName"){
                        layer.msg('仓库名重复',
                            {icon: 2, time: 800}
                        )
                    }
                }
            })
        }

        var openDeleteReimburse = function(id){
            layer.confirm('确定撤销吗？', {icon: 3, title:'提示'}, function(index){
                $.ajax({
                    type: "POST",
                    url: "/deleteProcessInstance",
                    traditional: true,
                    data: {"reimburseId":id},
                    dataType: "text",
                    success: function (data) {
                        table.reload("reimburseList");
                        layer.msg('删除成功！', {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        });
                    },
                    error: function () {
                        console.log("调用删除方法失败！");
                    }
                });
            });
        }



        //监听头工具栏事件
        //填写申请单
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'addReimburse':
                    openAddReimburse();
                    break;
            };
        });



        //监听搜索按钮
        form.on('submit(demo2)', function (data) {
            var status = $("#status").val();
            table.reload('reimburseList', {
                where: {"status": status}
            });
        });

        //撤销申请单
        $(.del).on('click', function(data) {
            openDeleteReimburse($(this).prev().val());
        });

        //编辑申请单
        $(.edit).on('click', function(data) {
            //layer.msg($(this).next().val());
            $("#parentId").val($(this).next().val());
            openUpdateReimburse();
        });

        //查看原因
        $(document).on('click', '.notice', function(data) {
            var content = $(this).next().next().next().val();
            var html = '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+content+'</div>'
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: false
                ,area: '300px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,btn: ['知道了']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: html
            });

        });




    });
</script>

</body>
</html>